<template>
  <div class="page_layout">
    <div class="menuNav">
      <div class="menu left-menu">
        <!--        <div @click="pageLink('/home')">首页</div>
                <div @click="pageLink('/StandingBook')">台账管理</div>
                <div>业务场景</div>-->
      </div>
      <div class="logo">
        <img src="@/assets/img/组979.png" style="z-index:1;position: fixed;">
        <span class="system_tit">web-杂七杂八属性</span>
      </div>
      <div class="menu">
        <div class="right-menu">
          <!--          <div>统计分析</div>
                    <div>应用库</div>-->
        </div>
        <avatarLayout/>
      </div>
    </div>
    <div class="page_content">
      <router-view class="actual_page"/>
    </div>
  </div>
</template>

<script>
import avatarLayout from "./avatarLayout";

export default {
  components: {
    avatarLayout
  },
  data() {
    return {}
  },
  methods: {
    pageLink(r) {
      this.$router.push(r)
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.page_layout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.menuNav {
  width: 100%;
  height: 80px;
  padding: 0 20px;
  overflow: hidden;
  background: #295ede;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;

  .menu {
    flex: .3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.6rem;

    &.left-menu, .right-menu {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .right-menu {
        justify-content: start;
      }

      div {
        margin-left: 1.5rem;
        cursor: pointer;
        z-index: 4;

        &:first-child {
          margin-left: 0;
        }
      }
    }
  }

  .logo {
    //flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.page_content {
  width: 100%;
  height: calc(100% - 80px);
  //padding: 10px 0;
  overflow: hidden;

  .actual_page {
    height: 100%;
    overflow: auto;
  }
}

.system_tit{
  font-size: 3.2rem;
  background: linear-gradient(to bottom, #fff, #5EC4FA);
  -webkit-background-clip: text;
  color: transparent;
  z-index: 2;
}
</style>
